<template>
	<xn-form-container title="导入" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<span
			>导入数据格式严格按照系统模板进行数据录入，请点击
			<a-button type="primary" size="small" @click="downloadImportUserTemplate">下载模板</a-button>
		</span>
		<a-divider dashed />
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="专业：" name="major">
				<a-select
					v-model:value="formData.major"
					:options="majorOptions"
					style="width: 100%"
					placeholder="请选择专业"
				>
				</a-select>
			</a-form-item>
			<a-form-item label="培养类型：" name="type">
				<a-select
					v-model:value="formData.type"
					:options="typeOptions"
					style="width: 100%"
					placeholder="请选择类型"
				>
				</a-select>
			</a-form-item>
			<a-form-item label="版本：" name="year">
				<a-input-number v-model:value="formData.year" style="width: 100%" placeholder="请输入年度" allow-clear />
			</a-form-item>
		</a-form>
		<div>
			<a-spin :spinning="impUploadLoading">
				<a-upload-dragger :show-upload-list="false" :custom-request="customRequestLocal" :accept="uploadAccept">
					<p class="ant-upload-drag-icon">
						<inbox-outlined></inbox-outlined>
					</p>
					<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
					<p class="ant-upload-hint">仅支持xls、xlsx格式文件</p>
				</a-upload-dragger>
			</a-spin>
		</div>
		<a-alert v-if="impAlertStatus" type="info" :show-icon="false" banner closable @close="onImpClose" class="mt-3">
			<template #description>
				<p>导入总数：{{ impResultData.totalCount }} 条</p>
				<p>导入成功：{{ impResultData.successCount }} 条</p>
				<div v-if="impResultData.errorCount > 0">
					<p><span style="color: red">失败条数：</span>{{ impResultData.errorCount }} 条</p>
					<a-table :dataSource="impResultErrorDataSource" :columns="impErrorColumns" size="small" />
				</div>
			</template>
		</a-alert>
	</xn-form-container>
</template>

<script setup name="userImpExp">
	import { message } from 'ant-design-vue'
	import { required } from '@/utils/formRules'
	import userApi from '@/api/sys/userApi'
	import downloadUtil from '@/utils/downloadUtil'
	import eduCurriculumApi from '@/api/biz/eduCurriculumApi'
	import bizOrgApi from '@/api/biz/bizOrgApi'
	import tool from '@/utils/tool'

	const formRef = ref()
	// 表单数据
	const formData = ref({})
	// 专业
	const majorOptions = tool.dictList('MAJOR')
	// 培养类型
	const typeOptions = tool.dictList('STUDENT_TYPE')
	const impUploadLoading = ref(false)
	const impAlertStatus = ref(false)
	const impResultData = ref({})
	const impResultErrorDataSource = ref([])
	const impAccept = [
		{
			extension: '.xls',
			mimeType: 'application/vnd.ms-excel'
		},
		{
			extension: '.xlsx',
			mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
		}
	]
	// 指定能选择的文件类型
	const uploadAccept = String(
		impAccept.map((item) => {
			return item.mimeType
		})
	)
	// 导入
	const customRequestLocal = (data) => {
		impUploadLoading.value = true
		const fileData = new FormData()
		// 校验上传文件扩展名和文件类型是否为.xls、.xlsx
		const extension = '.'.concat(data.file.name.split('.').slice(-1).toString().toLowerCase())
		const mimeType = data.file.type
		// 提取允许的扩展名
		const extensionArr = impAccept.map((item) => item.extension)
		// 提取允许的MIMEType
		const mimeTypeArr = impAccept.map((item) => item.mimeType)
		if (!extensionArr.includes(extension) || !mimeTypeArr.includes(mimeType)) {
			message.warning('上传文件类型仅支持xls、xlsx格式文件！')
			impUploadLoading.value = false
			return false
		}
		fileData.append('file', data.file)
		fileData.append('major', formData.value.major)
		fileData.append('type', formData.value.type)
		fileData.append('year', formData.value.year)
		return eduCurriculumApi
			.eduCurriculumImport(fileData)
			.then((res) => {
				impAlertStatus.value = true
				impResultData.value = res
				impResultErrorDataSource.value = res.errorDetail
			})
			.finally(() => {
				impUploadLoading.value = false
			})
	}
	// 关闭导入提示
	const onImpClose = () => {
		impAlertStatus.value = false
	}
	const impErrorColumns = [
		{
			title: '索引',
			dataIndex: 'index',
			width: '80px'
		},
		{
			title: '原因',
			dataIndex: 'msg'
		}
	]
	// 定义emit事件
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	let visible = ref(false)
	const submitLoading = ref(false)

	// 打开抽屉
	const onOpen = () => {
		visible.value = true
	}
	// 关闭抽屉
	const onClose = () => {
		formData.value = {}
		visible.value = false
		// 关闭导入的提示
		onImpClose()
	}
	// 默认要校验的
	const formRules = {
		major: [required('请选择专业')],
		type: [required('请选择培养类型')],
		year: [required('请输入版本年度，如：2023')]
	}
	// 下载用户导入模板
	const downloadImportUserTemplate = () => {
		eduCurriculumApi.eduCurriculumDownloadImportCurriculumTemplate().then((res) => {
			downloadUtil.resultDownload(res)
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
